<script setup>
import {reactive} from "vue"
import {axiosChangePassword} from "../../api";
import {getUserInfo, setPasswordStorage} from "../../storage/storage";
import {ElMessage} from "element-plus";

const userGroup = reactive({
  userAccount: getUserInfo().account,
  oldPassword: "",
  newPassword: "",
  newPasswordRepeat: "",
  dialogVisible: false,
  dialogInfo: "",
  async changePassword() {
    if (this.newPassword === this.newPasswordRepeat) {
      if (this.oldPassword !== this.newPassword) {
        let result = await axiosChangePassword({
          account: this.userAccount,
          old_password: this.oldPassword,
          new_password: this.newPassword
        })
        if (result.status === 200) {
          if (result.data === "AccountEmpty") {
            ElMessage.warning("账号错误或者为空")
          } else if (result.data === "OldPasswordEmpty") {
            ElMessage.warning("旧密码为空")
          } else if (result.data === "NewPasswordEmpty") {
            ElMessage.warning("新密码为空")
          } else if (result.data === "Normal") {
            ElMessage.success("修改成功")
            setPasswordStorage(this.newPassword);
          } else if (result.data === "UnknownError") {
            ElMessage.warning("未知错误")
          } else if (result.data === "POAIncorrect") {
            ElMessage.warning("旧密码错误")
          }
        }
      } else {
        ElMessage.warning("新旧密码一致")
      }
    } else {
      ElMessage.warning("两次输入新密码不一致")
    }
  }
})
</script>

<template>
  <div id="personConfig">
    <div class="person-config-box">
      <div class="grid-content bg-purple">
        <div class="config">
          <p>用户设置</p>
          <div class="config-box">
            <p>重置密码</p>
            <div class="config-input">
              <el-input v-model="userGroup.oldPassword" placeholder="旧密码"></el-input>
              <el-input v-model="userGroup.newPassword" placeholder="新密码"></el-input>
              <el-input v-model="userGroup.newPasswordRepeat" placeholder="重复新密码"></el-input>
            </div>
            <div class="config-btn">
              <el-button @click="userGroup.changePassword()">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../../css/config.css">

</style>
